<template>
<div>
    <async-modal initHeight="500px" initWidth="900px" title="风控提示" @update:visible="cancel">
        <template #modalBody>
            <el-table class="poverTable hasBorderBottom" :data="props.taskRisks" border :span-method="mergeRiskCellsMethod">
                <el-table-column min-width="200" prop="title" label="风控项目" show-overflow-tooltip>
                    <template v-slot="{ row: riskRow }">
                        <span>{{ riskRow.title }}</span>
                        <a href="javascript:void(0);" class="docIcon" @click="clickDetail(riskRow.monitorLogs)" v-if="riskRow.monitorLogs && riskRow.monitorLogs.length > 0">
                            <el-icon style="font-size: 15px;"><Document /></el-icon>
                        </a>
                    </template>
                </el-table-column>
                <el-table-column min-width="600" prop="reason" label="触发原因" show-overflow-tooltip/>
            </el-table>
        </template>
        <template #modalFoot>
            <div class="event-button">
                <el-button @click="cancel">关闭</el-button>            
            </div>
        </template> 
    </async-modal>
    <m-dig :details="myDetails" @closeDig="mLogVisible = false" v-if="mLogVisible" ></m-dig>
</div>
</template>

<script setup lang="ts">
import { Document } from '@element-plus/icons-vue'
import AsyncModal from '@/components/Modal/index.vue';
import MDig from '@/layout/data/riskItem/monitorDig.vue'

let $emit = defineEmits(['closeDig','secondConfirm']);

const props = defineProps<{
    taskRisks: any[];
}>();
const cancel = ()=>{
    $emit('closeDig');
}
const mergeRiskCellsMethod = ({ row, rowIndex, column }: any) => {
    let data = props.taskRisks;
    // 只对title列进行合并
    if (column.property === 'title') { // title列
        const cellValue = row.title;
        if (cellValue === null || cellValue === undefined) {
            return { rowspan: 1, colspan: 1 };
        }

        let rowspan = 1;
        let currentIndex = rowIndex;

        // 向上查找相同值的行
        while (currentIndex > 0) {
            const prevRow = data[currentIndex - 1];
            if (prevRow && prevRow.title === cellValue) {
                currentIndex--;
            } else {
                break;
            }
        }

        // 如果当前行不是第一个相同值的行，则返回 rowspan: 0, colspan: 0 隐藏单元格
        if (rowIndex !== currentIndex) {
            return { rowspan: 0, colspan: 0 };
        }

        // 向下计算相同值的行数
        while (currentIndex + rowspan < data.length) {
            const nextRow = data[currentIndex + rowspan];
            if (nextRow && nextRow.title === cellValue) {
                rowspan++;
            } else {
                break;
            }
        }
        return { rowspan, colspan: 1 };
    }
    return { rowspan: 1, colspan: 1 };
};
onMounted(()=>{
})
const myDetails = ref([]);
const mLogVisible = ref(false);

const clickDetail = ( val: any) => {
    myDetails.value = val;
    mLogVisible.value = true;
};
</script>

<style scoped lang="scss">
.docIcon{ display: inline-block; position: relative; top: 3px; margin-left: 3px;}
</style>
